<template>
  <div class="dorm">
    <div class="content_box_right_top">
      <div class="content_box_right_top_left">
        <span class="content_box_right_top_left_span_bg">
          公告主页
          <img
            src="../assets/images/content_x.png"
            class="content_box_right_top_left_img_x"
          />
        </span>
        <span>
          宿舍管理
          <img
            src="../assets/images/content_x.png"
            class="content_box_right_top_left_img_x"
          />
        </span>
      </div>
      <div class="content_box_right_top_right">
        <span>
          标签选项
          <img
            src="../assets/images/heder_todown.png"
            class="content_box_right_top_right_img_down"
          />
        </span>
      </div>
    </div>
    <div>
      <hr />
    </div>
    <!-- 按钮操作 -->
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
        <el-input
          placeholder="请输入宿舍名称"
          v-model="dormInfo"
          clearable
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="onSearchInfo"
          >搜索</el-button
        >
        <el-button type="primary" icon="el-icon-edit" @click="onReset"
          >重置</el-button
        >
        <el-button
          type="success"
          icon="el-icon-edit"
          @click="addDialog = true"
          plain
          >添加</el-button
        >
      </div>

      <!-- 表格数据 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="d_id"
          label="宿舍编号"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="d_name"
          label="宿舍名称"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="d_count"
          label="宿舍人数"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="d_cost"
          label="宿舍水电费余额(元)"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="d_status"
          label="宿舍状态"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- width="292" -->
            <el-button
              type="text"
              size="small"
              @click="delDormInfo(scope.row.d_id)"
              >删除</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="(editDialog = true), editDormInfo(scope.row)"
              >修改</el-button
            >
            <el-button type="text" size="small" @click="playDorm(scope.row)"
              >发起催款申请</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <el-pagination
        @current-change="d_changePage"
        background
        layout="prev, pager, next"
        :page-size="d_count"
        :total="total"
      >
      </el-pagination>
    </el-col>
    <!-- 添加宿舍模态框 -->
    <el-dialog title="添加宿舍信息" :visible.sync="addDialog" width="30%">
      <el-form :model="addDormData">
        <el-form-item label="宿舍编号" :label-width="formLabelWidth">
          <el-input
            v-model="addDormData.d_id"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="宿舍名称" :label-width="formLabelWidth">
          <el-input
            v-model="addDormData.d_name"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="宿舍人数" :label-width="formLabelWidth">
          <el-input
            v-model="addDormData.d_count"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="宿舍水电费余额" :label-width="formLabelWidth">
          <el-input
            v-model="addDormData.d_cost"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="宿舍状态:" :label-width="formLabelWidth">
          <el-select
            v-model="addDormData.d_status"
            placeholder="请选择宿舍状态"
          >
            <el-option label="正常" value="正常"></el-option>
            <el-option label="催款中" value="催款中"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible">取 消</el-button>
        <el-button type="primary" @click="addDormSave">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改宿舍信息模态框 -->
    <el-dialog title="修改宿舍信息" :visible.sync="editDialog" width="30%">
      <el-form :model="editDormData">
        <el-form-item label="宿舍编号" :label-width="formLabelWidth">
          <el-input
            v-model="editDormData.d_id"
            autocomplete="off"
            style="width: 300px"
            disabled
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="宿舍名称" :label-width="formLabelWidth">
          <el-input
            v-model="editDormData.d_name"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <!--         <el-form-item label="宿舍人数" :label-width="formLabelWidth">
          <el-input
            v-model="editDormData.d_count"
            autocomplete="off"
            style="width: 300px;"
            clearable
          ></el-input>
        </el-form-item> -->
        <el-form-item label="宿舍水电费余额" :label-width="formLabelWidth">
          <el-input
            v-model="editDormData.d_cost"
            autocomplete="off"
            style="width: 300px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="宿舍状态:" :label-width="formLabelWidth">
          <el-select
            v-model="editDormData.d_status"
            placeholder="请选择宿舍状态"
          >
            <el-option label="正常" value="正常"></el-option>
            <el-option label="催款中" value="催款中"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible">取 消</el-button>
        <el-button type="primary" @click="editDormSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import axios from "axios";
export default {
  data: function () {
    return {
      addDialog: false,
      editDialog: false,
      dormInfo: "",
      tableData: [],
      addDormData: {
        d_id: "",
        d_name: "",
        d_count: "0",
        d_cost: "0",
        d_status: "正常",
      },
      editDormData: {

      },
      formLabelWidth: "120px",
      total: 0,
      d_page: 1,
      d_count: 5,
    };
  },
  methods: {
    dialogFormVisible: function () {
      this.addDialog = false;
      this.editDialog = false;
    },
    // 数据
    d_getData: function () {
      this.$axios({
        url: "/d_getInfo",
        // methods: "get",
        params: {
          d_search: this.dormInfo,
          d_page: this.d_page,
          d_count: this.d_count,
        },
      }).then(({ data }) => {
        if (data.error == 0) {
          this.tableData = data.data;
          this.total = data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    // 页码
    d_changePage: function (page) {
      // console.log(page);
      this.d_page = page;
      this.d_getData();
    },
    // 搜索
    onSearchInfo: function () {
      this.d_getData();
    },
    // 重置
    onReset: function () {
      let Info = (this.dormInfo = "");
      this.$axios({
        url: "/d_getInfo",
        // methods: "get",
        params: {
          d_search: Info,
          d_page: this.d_page,
          d_count: this.d_count,
        },
      }).then(({ data }) => {
        if (data.error == 0) {
          this.tableData = data.data;
          this.total = data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    // 添加宿舍
    addDormSave: function () {
      this.$axios({
        url: "/d_add",
        method: "post",
        data: this.addDormData,
      }).then(({ data }) => {
        if (data.error == 0) {
          this.$message.success("数据添加成功~~~");
          this.addDialog = false;
          this.d_getData();
        } else {
          this.$message.error("寝室号重复，添加失败！！");
        }
      });
    },
    // 删除宿舍
    delDormInfo: function (d_id) {
      let d_Id = d_id;
      this.$axios({
        url: "/d_del",
        method: "post",
        data: {
          d_id: d_Id,
        },
      }).then(({ data }) => {
        if (data.error == 0) {
          this.$message.success("删除成功!");
          // this.delDialog = false;
          this.d_getData();
        } else {
          this.$message.error("寝室不为空,删除失败！！");
        }
      });
    },
    // 修改宿舍信息
    editDormInfo: function (row) {
      let editDormData = {...row}
      this.editDormData = editDormData;
    },
    editDormSave: function () {
      console.log(this.editDormData);
      this.$axios({
        url: "/d_reviseInfo",
        method: "Post",
        data: this.editDormData,
      }).then(({ data }) => {
        if (data.error == 0) {
          this.$message.success("数据修改成功！");
          this.d_getData();
          this.editDialog = false;
        } else {
          this.$message.error("数据修改失败！");
        }
      });
    },
    // 发起催款
    playDorm: function (row) {
      let Id = row.d_id;
      let Status = row.d_status;
      if (Status == "正常") {
        Status = "催款中";
      } else {
        Status = "正常";
      }
      // console.log(Status);
      // console.log(Id);
      this.$axios({
        url: "/dorm_Dunning",
        method: "post",
        data: {
          id: Id,
          d_status: Status,
        },
      }).then(({ data }) => {
        if (data.error == 0) {
          this.$message.success("状态修改成功！");
          this.d_getData();
          // this.editDialog = false;
        } else {
          this.$message.error("状态修改失败！");
        }
      });
    },
  },
  mounted: function () {
    this.d_getData();
  },
};
</script>


<style scoped lang='less'>
.dorm {
  .content_box_right {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    margin-right: 20px;
    display: none;
  }
  .content_box_right_top {
    width: calc(100% - 30px);
    height: 50px;
    margin: 20px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 2px 6px 5px rgb(212, 212, 212);
  }
  .content_box_right_top_left span {
    width: 100px;
    height: 20px;
    padding: 7px;
    background-color: #4985fb;
    margin-left: 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
  }
  .content_box_right_top_left_img_x {
    position: relative;
    top: 2px;
    left: 2px;
  }
  .content_box_right_top_right span {
    width: 100px;
    height: 20px;
    padding: 7px;
    background-color: #4985fb;
    margin-right: 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
  }
  .content_box_right_top_right_img_down {
    position: relative;
    top: -2px;
    left: 1px;
  }
  .content_box_right_content_title {
    font-size: 16px;
    width: 100%;
    height: 33px;
    line-height: 33px;
    vertical-align: middle;
    background-color: #fff;
    box-sizing: border-box;
    padding-left: 30px;
    font-weight: bold;
  }
  .content_box_right_content_message {
    width: calc(100% - 30px);
    margin: 20px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 2px 6px 5px rgb(212, 212, 212);
  }
  div hr {
    margin: 20px;
    border: 0;
    border-top: 1px solid #000;
  }
  /* span标签背景 */
  .content_box_right_top_left_span_bg {
    background-color: #fff !important;
    color: #6a6a6a !important;
    border: 1px solid #ccc;
  }
  // 表格布局
  .el-col {
    width: 100%;
    padding-left: 20px;
    padding-right: 40px;
    .el-input {
      width: 220px;
    }
    .el-button {
      margin-left: 20px;
    }
    .el-table {
      margin-top: 20px;
      text-align: center;
      border-radius: 8px;
    }
    .el-table-column {
      text-align: center;
    }
    .el-pagination {
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>
